<template>
  <div>
    <el-form :inline="true" :model="selectData" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="selectData.nikeName" placeholder="请输入关键字" />
      </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="selectData.role" class="m-2" placeholder="请选择">
          <el-option label="全部" :value="0" />
          <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table">
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180" />
        <el-table-column prop="nikeName" label="姓名" width="180" />
        <el-table-column prop="role" label="权限">
          <template #default="scope">
            <el-button v-for="item in scope.row.role" :key="item.roleId" type="text" size="small">{{
              item.roleName
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { InitData, LisInt } from '../types/user'
import { getUserList, getRoleList } from '../http/api'

export default defineComponent({
  setup() {
    const data = reactive(new InitData())
    onMounted(() => {
      getUserList().then((res) => {
        data.list = res.data
        data.listData = res.data
        console.log(data.list)
      })
      getRoleList().then((res) => {
        data.roleList = res.data
      })
    })
    const onSubmit = () => {
      const arr: LisInt[] = data.list.filter(
        (e) => e.nikeName.includes(data.selectData.nikeName) && e.role.find((v) => v.role === data.selectData.role)
      )
      data.listData = arr
    }
    return {
      ...toRefs(data),
      onSubmit,
    }
  },
})
</script>

<style scoped></style>
